<template>
    <div class="app cloak" :class="isready==true?'clear_cloak':''">
        <!--<div class="search"><input type="search"  placeholder="请输入城市名">-->
            <!--<div class="btn"><img src="/static/images/search.png"/></div>-->
        <!--</div>-->


        <div class="area" v-if="hot_id==0 &&first_area_id==0">
                <div class="title">热门城市</div>
                <div class="area_lists" style="overflow: hidden;">
                    <div v-for="(item,index) in  hot_first_list" :key="index" @click="set_hot(item.id,item.name)" class="item">
                        {{item.name}}
                    </div>
                </div>
        </div>

        <div class="area"  v-if="second_area_id==0&&hot_id!=0">
            <div class="title">二级活动区域
                <text class="reset" @click="reset_area()">重选</text></div>
            <div class="area_lists" style="overflow: hidden;">
                <div v-for="(item,index) in  hot_sub_list" :key="index" @click="set_seconds(item.id,item.name)" class="item" >
                    {{item.name}}
                </div>
            </div>
        </div>

        <div class="area" v-if="second_area_id==0&& first_area_id==0 &&hot_id==0">
            <div class="first" v-for="(item,index) in first_list" :key="index">
                <div class="title">
                    <text style="background: #ff6600;color: #fff;padding: 5px;border-radius: 50%;width: 10px;height: 10px;line-height:10px; display: inline-block;">{{item.city_e}}</text>
                </div>
                <div class="area_lists" style="overflow: hidden;">
                    <div v-for="(subitem,subindex) in item.lists" :key="subindex"
                         @click="set_first(subitem.id,subitem.name)" class="item">
                        {{subitem.name}}
                    </div>
                </div>
            </div>
        </div>


        <div class="area" v-if="second_area_id==0&& first_area_id!=0">
            <div class="title">二级活动区域
                <text class="reset" @click="reset_area()">重选</text>
            </div>
            <div class="sub" >
                <div class="area_lists"  v-for="(item,index) in sub_list" :key="index" >
                    <div v-for="(subitem,subindex) in item.lists" :key="index" @click="set_second(subitem.id,subitem.name)" class="item">
                        {{subitem.name}}
                    </div>
                </div>
            </div>
        </div>



        <block v-if="second_area_id!=0">
            <div class="box">
                <div class="title">活动介绍</div>
                <div class="content">
                    <wxParse :content="info.introduce"/>
                </div>
            </div>

            <div class="box">
                <div class="title">收费标准</div>
                <div class="content">
                    <wxParse :content="info.charge"/>
                </div>
            </div>
            <div class="box">
                <div class="title">组织形式与要求</div>
                <div class="content">
                    <wxParse :content="info.requirement"/>
                </div>
            </div>
            <div class="box">
                <div class="title">报名方式</div>
                <div class="content">
                    <wxParse :content="info.signup_text"/>
                </div>
            </div>
            <div class="btnlist"><a class="signup_btn" @click="toinput()">我要报名</a>
            <div class="reset_btn" @click="reset_area()">重选</div>
            </div>
        </block>

    </div>
</template>

<script>
    var that = null;
    var is_to = true
    import wxParse from 'mpvue-wxparse'

    export default {
        components: {
            wxParse
        },
        data() {
            return this.datainit({
                first_list: [],
                sub_list: [],
                hot_first_list:[],
                hot_sub_list:[],
                first_area_id: 0,
                second_area_id: 0,
                first_area_name: "",
                second_area_name: "",
                info: {},
                hot_id:0
            })
        },
        created() {
            that = this;
            this.isready = true;
        },
        mounted() {
            that.check()

        },
        methods: {
            init() {
                that.area_list();
                that.hot_list();
            }
            , setgrade(e) {
                that.grade_index = e.target.value;
                that.grade = that.grade_list[that.grade_index].level;
                that.grade_str = that.grade_list[that.grade_index].name;
            },
            area_list: function () {
                that.first_list = [];
                that.sub_list = [];
                that.$post("api/area/lists", {up_id: that.first_area_id}, function (lists){
                    if (that.first_area_id == 0){
                        that.first_list = lists
                    } else {
                        that.sub_list = lists
                    }

                })
            },
            hot_list:function(){
                that.hot_first_list = [];
                that.hot_sub_list = [];
              that.$post("api/area/hotcities",{up_id:that.hot_id},function(lists){
                  if (that.hot_id == 0) {
                      that.hot_first_list = lists
                  } else {
                      that.hot_sub_list = lists
                  }
              })
            },
            reset_area: function () {  //重选
                that.hot_id = 0;
                that.second_area_id = 0;
                that.first_area_id = 0;
                that.area_list();
                that.hot_list();
                is_to = true
            },
            set_first: function (_id, _name) {//普通省份切换
                that.first_area_id = _id;
                that.first_area_name = _name;
                that.area_list()

            },
            set_hot:function(_id,_name){//热门城市切换
                that.hot_id = _id;
                that.hot_name = _name;

                that.hot_list()
            },
            set_second: function (_id, _name) {
                that.second_area_id = _id;
                that.second_area_name = _name;
                that.$post("api/area/info", {id: that.second_area_id}, function (data) {
                    that.info = data
                },function (data) {
                    console.log(data)
                    that.toast(data.message)
                    is_to = false
                })
            },
            set_seconds: function (_id, _name) {
                that.hot_id = _id
                that.second_area_id = that.hot_id;
                that.hot_name = _name;
                that.$post("api/area/info", {id: that.second_area_id}, function (data) {
                    that.info = data
                },function (data) {
                    console.log(data)
                    that.toast(data.message)
                    is_to = false
                })
            },
            toinput:function () {
                that.toast("该地区暂未开放")
                if (is_to) {
                    wx.navigateTo({
                        url: '/pages/signup/index/main?area_id='+that.second_area_id
                    })
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .app {
        padding-bottom: 20px;
    }
    .search {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        border-left: 10px solid #FFF;
        border-right: 10px solid #FFF;
        background: #FFF;
        height: 50px;
        padding-top: 5px;
        display: flex;

        input {
            flex: 1;
            border-radius: 5px;
            border: 1px solid #CCC;
            height: 38px;
        }

        .btn {
            display: block;
            width: 50px;
            height: 40px;

            img {
                position: relative;
                display: block;
                width: 30px;
                height: 30px;
                margin: auto;
                margin-top: 5px;
            }
        }

    }
    .btnlist{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 50px;
        display: flex;
        z-index: 99;
        .signup_btn{
            display: block;
            width: 240px;
            background: #ff6600;
            color: #FFF;
            line-height: 50px;
            text-align: center;
        }
        .reset_btn{
            flex: 1;
            background: #fff;
            color: #ff6600;
            line-height: 50px;
            text-align: center;
        }
    }

    .area {
        position: relative;
        width: 100%;
        margin: auto;
        background: #FFF;
        overflow: hidden;

        .title {
            position: relative;
            text-align: center;
            line-height: 40px;
            height: 40px;
            .reset {
                position: absolute;
                right:20px;
                color: #F66;
            }
        }

        .area_lists {
            /*overflow: hidden;*/
            .item {
                width: 25%;
                height: 30px;
                float: left;
                line-height: 30px;
                text-align: center;
                border:1px solid #ccc;
                margin-left:20px;
                margin-top: 10px;
                margin-bottom:10px;
                color: #666;
            }
        }

    }
    .box{
        position: relative;
        width: 100%;
        background: #FFF;
        overflow: hidden;
        margin-top: 10px;
        margin-bottom: 10px;
        box-sizing: border-box;
        border:10px solid #FFF;
        .title{
            position: relative;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 20px;
        }
    }

</style>

